<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新经资讯后台管理</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/main.css">
    <script type="text/javascript" src="../js/echarts.min.js"></script>
</head>
<body>
<div class="breadcrub">
    当前位置：用户管理>用户统计
</div>
<div class="spannels">
    <div class="spannel scolor01">
        <em>36365</em><span>人</span>
        <b>用户总数</b>
    </div>
    <div class="spannel scolor02">
        <em>146</em><span>人</span>
        <b>用户月新增数</b>
    </div>
    <div class="spannel2 scolor03">
        <em>32</em><span>人</span>
        <b>用户日新增数</b>
    </div>
</div>

<div class="pannel">
    <div id="chart_show" class="chart_show"></div>
</div>
<script>
    var oChart = echarts.init(document.getElementById('chart_show'));
    var chartopt = {
        title: {
            text: '近30天用户新增数量',
            left: 'center',
            top: '10'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['active'],
            top: '40'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                name: '今天',
                type: 'category',
                boundaryGap: false,
                data: ["2018-05-10", "2018-05-11", "2018-05-12", "2018-05-13", "2018-05-14", "2018-05-15", "2018-05-16", "2018-05-17", "2018-05-18", "2018-05-19", "2018-05-20", "2018-05-21", "2018-05-22", "2018-05-23", "2018-05-24", "2018-05-25", "2018-05-26", "2018-05-27", "2018-05-28", "2018-05-29", "2018-05-30", , "2018-05-28", "2018-05-29", "2018-05-30", "2018-05-28", "2018-05-29", "2018-05-30", "2018-05-31", "2018-06-01", "2018-06-02", "2018-06-03", "2018-06-04", "2018-06-05", "2018-06-06", "2018-06-07", "2018-06-08", "2018-06-09"]
            }
        ],
        yAxis: [
            {
                name: '新增用户数量',
                type: 'value'
            }
        ],
        series: [
            {
                name: 'active',
                type: 'line',
                smooth: true,
                itemStyle: {normal: {areaStyle: {type: 'default'}, color: '#f80'}, lineStyle: {color: '#f80'}},
                data: [10, 8, 9, 12, 13, 10, 5, 3, 2, 20, 11, 23, 10, 8, 9, 12, 13, 10, 5, 3, 2, 20, 11, 23, 10, 8, 9, 12, 13, 10, 5, 10, 8, 9, 12, 12, 13, 10, 5]
            }],
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(255,136,0,0.39)'
                }, {
                    offset: .34,
                    color: 'rgba(255,180,0,0.25)'
                }, {
                    offset: 1,
                    color: 'rgba(255,222,0,0.00)'
                }])

            }
        }

    };

    oChart.setOption(chartopt);

</script>
</body>
</html>